<template>
    <van-nav-bar
        title="邮箱认证"
        left-text="返回"
        left-arrow
        fixed
        @click-left="onClickLeft"
    />

    <div class="clear"></div>
    <div class="h50"></div>
    <div class="clear"></div>
    <div class="user" :style="{background:'url('+LoginUser.cover+')'}">
        <div class="user-image">
            <img :src="LoginUser.avatar" alt="">
        </div>
    </div>

    <van-field
      v-model="LoginUser.email"
      name="email"
      label="邮箱"
      label-align="right"
      label-width="60px"
      readonly
      placeholder="请输入邮箱"
    />
     <van-field
      v-model="code"
      center
      clearable
      label="验证码"
      placeholder="请输入验证码"
      label-align="right"
      label-width="60px"
      v-if="LoginUser.auth == 0"
      v-show="Email"
    >
      <template #button >

            <van-count-down v-show="Stime" :auto-start="false" millisecond :time="time"  format="ss秒" ref="countDown"  @finish="onFinish" />
            <van-button size="small" type="primary" @click="onEmail" v-show="Btn">
                发送验证码
            </van-button>
      </template>
    </van-field>

    <van-button type="primary" :disabled="LoginUser.auth == 1 ? true : false" size="normal" block @click="onCheck">{{LoginUser.auth == 1 ? '已验证' : '验证'}}</van-button>
</template>

<script>
export default {
    data() {
        return {
            LoginUser:this.$cookies.get('LoginUser'),
            code:'',
            time:60*1000,
            Stime:false,
            Btn:true,
            Email:true
        }
    },
    methods: {
        onClickLeft()
        {
            this.$router.push('/user/base/index')
        },
        async onEmail()
        {
            this.Btn = false
            this.Stime = true
            this.$refs.countDown.start()

            let result = await this.$api.EmailCode({userid:this.LoginUser.id,email:this.LoginUser.email})

            if(result.code === 1)
            {
                this.$notify({
                    type: "success",
                    message: result.msg,
                    duration:1500,
                    
                });
                return false
            }else{
                this.$notify({
                    type: "danger",
                    message: result.msg,
                    duration:1500
                });
                return false
            }
        },
        onFinish()
        {
            this.Btn = true
            this.Stime = false
            this.$refs.countDown.reset()
        },
        async onCheck()
        {
            let data = {
                code:this.code,
                userid:this.LoginUser.id
            }

            let result = await this.$api.EmailCheck(data)

            if(result.code === 1)
            {
                this.$notify({
                    type: "success",
                    message: result.msg,
                    duration:1500,
                    
                });

                this.Email = false
                return false
            }else{
                this.$notify({
                    type: "danger",
                    message: result.msg,
                    duration:1500
                });
                return false
            }
        }
    },
}
</script>
<style>
@import url('/assets/css/profile.css');

.van-button--block{
    width: 90%;
    margin: 20px auto;
    border-radius: 5px;
}
</style>